﻿@{
    ViewBag.Title = "WebAgent - Vozila";
}

<div id="vozilaNav"></div>
<style>
    .infoItemImage { float: left; }
    .infoItemDesc {margin-left: 42px; font-size: 10px;}
    .infoItemCaption{  font-weight: bold; }
    .infoItemStatus { margin-top: 0px; }
    .nedostupno {color: red !important;}
    .dostupno {color: Black !important; }
</style>
<script type="text/javascript">
    $(document).ready(function() {
        var tmpl = "<div class='infoItem'>" + 
                        "<img class='infoItemImage' width='32' height='32' />" + 
                            "<div class='infoItemDesc'>" + 
                                "<div class='infoItemCaption'></div>" + 
                                "<div class='infoItemReg'></div>" +
                                "<div class='infoItemStatus'></div>" +
                            "</div>" +
                    "</div>";
        var vozila = @Html.Raw(Json.Encode(ViewBag.Vozila)) ;
        var source = [];
            $.each(vozila, function(ix, vozilo) {
                var item = { };
                var directive = {
                    'img@src' : 'Content/thumbnails/vozila/' + vozilo.Id + '.png',
                    'div.infoItemCaption' : vozilo.Naziv,
                    'div.infoItemReg' : vozilo.RegistarskiBroj,
                    'div.infoItemStatus' : vozilo.Status,
                    'div.infoItemStatus@class+' : function () {
                         if (vozilo.Dostupno == 0) return ' nedostupno';
                        else return ' dostupno';
                    }
                };
              
                item.html = $(tmpl).render(vozilo, directive).html();
                source.push(item);
            });
            $("#vozilaNav").jqxListBox({ source: source, width: 200, height: 648 });
    });
</script>